<template>
  <div class="CountDown">{{text}}</div>
</template>

<script>
export default {
  components: {},
  props: {
    count: {
      default: 60
    },
    defaultText: {
      default: "发送验证码"
    }
  },
  data() {
    return {
      number: 0,
      text: ""
    };
  },
  methods: {
    startCountDown() {
      if (this.text !== "发送验证码") return;
      this.text = "正在发送...";
      const timer = setInterval(() => {
        if (this.number <= 0) {
          clearInterval(timer);
          this.number = 60;
          this.text = this.defaultText;
        } else {
          this.text = this.number-- + "s";
        }
      }, 1000);
    }
  },
  computed: {},
  watch: {},
  created() {
    this.number = this.count;
    this.text = this.defaultText;
  },
  mounted() {
    this.$on("start", () => {
      this.startCountDown();
    });
  }
};
</script>

<style scoped lang="scss">
.boCountDownx {
}
</style>
